<template>
    <el-image class="y-image" :src="obj.src" :fit="obj.fit">
        <template #error>
            <div style="width: 100%;height: 100%;background-color: #F5F7FA;color: black"
                 class="flex-center-col">
                <i class="el-icon-picture-outline"></i>
                图片迷路了...
            </div>
        </template>
        <template #placeholder>
            <div class="image-slot">加载中<span class="dot">...</span></div>
        </template>
    </el-image>
</template>

<script>
    import {reactive} from "@vue/reactivity";
    import {watch} from 'vue'
    export default {
        name: "YImage",
        props:['src','fit'],
        setup(props){
            let obj= reactive({
                src:props.src,
                fit:props.fit
            })

            return {
                obj
            }
        },
        watch:{
            src(newV){
                this.obj.src=newV
            }
        }
    }
</script>

<style scoped lang="less">
    .y-image{
        width: 100%;
        height: 100%;
    }
</style>